<template>
	<view class="container">
		<!-- 自定义头部 -->
		<HeaderNav ref="headerNavComponent" :title="'完善信息'" :backIconShow="false"></HeaderNav>

		<scroll-view scroll-y scroll-with-animation class="container-scroll" style="height: 100vh;">
			<view class="container-box">
				<!-- 占位 -->
				<view :style="'width: 100%;height: ' + headerNavHeight + 'px'"></view>
				<!-- 占位 -->

				<!-- 内容 -->
				<view class="box" :style="'width: 100%;height: calc(100vh - ' + headerNavHeight + 'px)'">
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain='true' class="avatar">
						<view class="ava-box">
							<image class="avatar" :src="avatarUrl"></image>
						</view>
						<view class="hint">点击选择</view>
					</button>

					<view class="name-text">
						<input type="nickname" v-model="name" @blur='onBlur' focus placeholder="请输入昵称"
							placeholder-style="color: rgba(0, 0, 0, 0.2)">
					</view>

					<view class="box-bom">
						<view @click="onComplete(1)">暂不完善</view>
						<view @click="onComplete(2)">确定并登录</view>
					</view>
				</view>
				<!-- 内容 -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		requestGet,
		requestPost
	} from "@/service/request";
	import {
		uploadUserInfo
	} from "@/service/api/login";
	import {
		getToken,
		setUserInfo
	} from "@/service/localStorage";

	import HeaderNav from "@/components/HeaderNav/index.vue";

	export default {
		components: {
			HeaderNav,
		},
		data() {
			return {
				headerNavHeight: 0,

				// 内容
				avatarUrl: "",
				name: ""
			}
		},
		onLoad() {},
		mounted() {
			this.$refs.headerNavComponent.setHeaderNav();
			this.headerNavHeight = this.$refs.headerNavComponent.headerNavHeight;
		},
		methods: {
			/**
			 * @description 获取用户头像
			 */
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;

				uni.showLoading({
					title: "上传中",
					mask: true,
				});

				uni.uploadFile({
					url: "https://sikang.daorankeji.cn/api/upload/image",
					filePath: avatarUrl,
					name: "file",
					header: {
						"Content-Type": "multipart/form-data",
						"Authori-zation": "Bearer " + getToken()
					},
					success: (res) => {
						uni.hideLoading();
						let data = JSON.parse(res.data);

						if (data.status == 200) {
							this.avatarUrl = data.data.url;
						} else if ([410000, 410001, 410002].indexOf(data.status) !== -1) {
							uni.showToast({
								title: "上传失败",
								icon: "none",
								mask: true,
								duration: 3000,
								complete: () => {
									setTimeout(() => {
										this.goBack();
									}, 3000);
								}
							});
						} else {
							uni.showToast({
								title: data.msg,
								icon: "none",
								mask: true,
								duration: 3000
							});
						}
					}
				});
			},
			/**
			 * @description 获取用户昵称
			 */
			onBlur(e) {
				const {
					value
				} = e.detail;

				this.name = value;
			},
			/**
			 * @description 是否完善信息登录
			 */
			onComplete(value) {
				let params = {
					avatar: this.avatarUrl
				};

				if (value == 2) {
					// 确定并登录
					if (this.name.length == 0) {
						return uni.showToast({
							title: "请填写昵称",
							icon: "none",
							mask: true,
							duration: 3000
						});
					}

					params.nickname = this.name;

					requestPost(uploadUserInfo, {
						data: params
					}).then((res) => {
						uni.showToast({
							title: "完善信息成功",
							icon: "none",
							mask: true,
							duration: 3000,
							complete: () => {
								setTimeout(() => {
									this.goBack();
								}, 3000);
							}
						});
					}).catch((e) => {
						uni.showToast({
							title: "完善信息失败",
							icon: "none",
							mask: true,
							duration: 3000
						});
					}).finally(() => {});
				} else {
					this.goBack();
				}
			},
			/**
			 * @description 返回首页
			 */
			goBack() {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			},
			/**
			 * @description 下拉刷新钩子
			 */
			onPullDownRefresh() {
				uni.stopPullDownRefresh();
			},
			/**
			 * @description 上拉加载钩子
			 */
			onReachBottom() {
				console.log("上拉加载！！！");
			},
			/**
			 * @description 返回操作钩子
			 */
			onBackPress(e) {
				// backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
				if (e.from === "backbutton") {
					// 阻止返回true
					// return true; // 一级页面阻止返回，其它不阻止
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100vh;
		padding-top: 150rpx;

		.avatar {
			display: flex;
			justify-content: center;
			position: relative;
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			margin: 0;
			padding: 0;
			border: none;

			.ava-box {
				position: relative;
				width: 260rpx;
				height: 260rpx;
				margin-top: 50rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}

				.cutout-left {
					position: absolute;
					top: 0;
					left: -2rpx;
					width: 30rpx;
					height: 100%;
					background-color: $color-bai;
				}

				.cutout-right {
					position: absolute;
					top: 0;
					right: -2rpx;
					width: 30rpx;
					height: 100%;
					background-color: $color-bai;
				}

				.cutout-bom {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 28rpx;
					background-color: $color-bai;
				}
			}

			.hint {
				position: absolute;
				bottom: 0rpx;
				left: 0;
				width: 100%;
				height: 60rpx;
				line-height: 45rpx;
				font-size: $S-fs;
				color: $color-bai;
				background-color: $color-tm-hei;
			}
		}

		.name-text {
			width: 80%;
			margin-top: 220rpx;

			input {
				height: 70rpx;
				font-size: $XXL-fs;
				font-weight: 300;
				text-align: center;
			}
		}

		.box-bom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150rpx;
			padding: 0 20rpx;
			box-shadow: 0px 0px 18px 0px $color-tm-hui;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 100rpx;
				padding: 0;
				margin: 0;
				font-size: $L-fs;
				border-radius: 30rpx;
				border: none;
			}

			view:first-of-type {
				color: $color-hei;
				background: $color-tm-hui;
			}

			view:last-of-type {
				color: $color-bai;
				background-color: $color-lv;
			}
		}
	}
</style>